<template>
  <div>
    <div class="commentBox">
    <span class="left">
      <img onerror="onerror=null;src='https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'"/>
    </span>
      <span class="right">
      <textarea id="textpanel" class="textArea" placeholder="既然来了，那就留下些什么吧~" v-model="value" @input="vaildCount"></textarea>
    </span>
    </div>
    <div class="bottom">
      <el-button class="submit p2" type="primary">发送评论</el-button>
      <el-button class="cancel p2" type="info">取消评论</el-button>
      <span class="allow p2">还能输入0个字符</span>
    </div>
  </div>

</template>

<script>
import {mapGetters, mapMutations} from 'vuex'
export default {
  name: 'CommentBox',
  props: {
    userInfo: {
      type: Object
    },
    // 回复的对象
    toInfo: {
      type: Object
    },
    // 博客信息
    commentInfo: {
      type: Object
    },
    showCancel: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      comments: [],
      submitting: false,
      value: '',
      user: {},
      count: 1024,
      isShowEmojiPanel: false // 是否显示表情面板
    }
  },
  computed: {
    ...mapGetters(['getUserPhoto'])
  },
  mounted () {
    // 页面加载的时候调用监听
    this.hideEmojiPanel()
  },
  methods: {
    // 拿到vuex中的写的方法
    ...mapMutations(['setLoginMessage']),
    vaildCount: function () {
      var count = 1024 - this.value.length
      if (count <= 0) {
        this.count = 0
      } else {
        this.count = count
      }
    },
  }
}
</script>

<style>
  .commentBox {
    min-width: 700px;
    width: 100%;
    height: 100px;
    margin: 0 auto;
  }
  .commentBox .left {
    display: inline-block;
    width: 4%;
    height: 100%;
    padding-top: 3px;
  }
  .commentBox .left img {
    cursor: pointer;
    margin: 0 auto;
    width: 90%;
    border-radius: 50%;
  }
  .commentBox .right {
    display: inline-block;
    margin: 5px 2px 0 0;
    width: 95%;
    height: 100%;
  }
  textarea::-webkit-input-placeholder {
    color: #909399;
  }
  .commentBox .right textarea {
    color: #606266;
    padding:10px 5px 5px 10px;
    resize: none;
    width: 95%;
    height: 100%;
  }
  .bottom {
    position: relative;
    min-width: 690px;
    width: 98%;
    height: 60px;
    line-height: 40px;
    margin-top: 20px;
  }
  .bottom .p2 {
    float: right;
    margin-top: 5px;
    margin-right: 10px;
  }
  .emoji-panel-btn img{
    height: 35px;
    width: 35px;
  }
  .emoji-panel-btn:hover {
    cursor: pointer;
    opacity: 0.8;
  }
</style>
